@import (reference) 'config';
@import (reference) '../../../app/less/typography';

// do not forget add all the same changes to 'sponsored.less'

.asset-modal {
  height: 100%;

  &__head {
    padding-top: @padding-main-layout * 4;
    height: 170px;
    position: relative;
  }

  &__head-content {
    display: flex;
  }

  &__logo {
    position: relative;
    margin: 0 20px 0 0;
    left: 0;
    z-index: 1;
  }

  &__name {
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: normal;
  }

  &__data {
    display: flex;
    flex-direction: column;
    min-height: 65px;
    justify-content: center;
    flex: 1 0;
  }

  &__help {
    .help-icon__content {
      width: calc(100% ~'- 105px');
    }
  }

  .chart-wrapper {
    position: absolute;
    opacity: 0.2;
    height: 76px;
    width: calc(100% ~'+ 80px');
    left: -40px;
    bottom: 0;
    border-bottom: 1px solid @color-submit-300;

    .interactive-stop {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .chart-tooltip,
    .chart-legend { // Lib ng3-charts
      display: none !important;
    }
  }

  .rating-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 7px;
    position: relative;
    z-index: 10;
  }

  .rating-number {
    margin-left: 10px;
  }
}

html body md-dialog.asset-info-modal {

  md-dialog-content {
    padding: 0 40px;
    overflow-y: hidden;

    &::after {
      display: none;
    }
  }

  .asset-description {
    word-wrap: break-word;
    word-break: break-word;
  }

  .tab-tem {
    .footnote-1();
    overflow-y: auto;
    max-height: calc(~'90vh - 280px');
  }

  w-tabs {
    margin: -1px 0 0 -40px;
    width: calc(100% ~'+ 80px');
  }

  @media screen and (max-width: 768px) {
    .asset {
      &-modal__name {
        flex-direction: column;
        align-items: flex-start;
        font-size: 20px;
      }
      &__ticker {
        margin-top: 5px;
      }
    }
    .status-label-min {
      margin: 5px 0 0;
    }
  }

  .padding-content .tab-tem {
    padding: 40px;

    .line {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid @color-basic-100;
      padding: 5px 0;
      align-items: center;

      &-description {
        width: 100%;
        padding: 13px 16px;
        border: 1px dashed @color-basic-100;
        border-radius: @border-radius;
        background: @color-basic-50;
      }

      &:first-child {
        margin-top: -10px;
      }

      &.chart-container {
        .legend-item {
          white-space: nowrap;
        }

        & > div:first-child {
          width: 140px;
          flex-grow: 0;
        }

        & > div:last-child {
          width: calc(100% ~'- 140px');
          flex-grow: 1;
          margin-left: 30px;
        }
      }

      &-description {
        padding-top: 20px;

        div:last-child {
          padding-top: 6px;
          min-height: 30px;
        }
      }

      &:last-child {
        border-bottom: 0 none;
      }

      & > div:first-child {
        align-items: center;
        display: flex;
      }

      & > div:last-child {
        align-items: center;
        display: flex;
        flex-direction: column;
        text-align: right;
        margin-left: 20px;

        .legend-item, .total {
          display: flex;
          width: 100%;
          border-bottom: 1px solid @color-basic-100;
          align-items: center;

          & > div {
            flex-basis: 50%;

            &:first-child {
              text-align: left;
            }
            &:last-child {
              text-align: right;
            }

            .legend-color {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              display: inline-block;
              margin: -3px 7px 0 0;
              vertical-align: middle;
            }
          }
        }

        .total {
          border-bottom: 0 none;
          font-family: @font-roboto-medium;

          div:first-child {
            color: @color-basic-500;
          }
        }

      }
    }

  }

  .padding-content.tab-details .tab-tem {
    .footnote-1();
    .line {
      min-height: 38px;
    }
    .line > div:last-child {
      display: block;
    }
  }

  .tab-container {
    w-transaction-list ul {
      border-top: none;

      .transaction-item {
        .date {
          padding-left: 40px;
          letter-spacing: 2px;
        }

        .row {
          padding-left: 20px;

          .line:last-child {
            padding-right: 40px;
          }
        }
      }
    }

    .locale-address {
      display: none;
    }

    w-actions {
      display: none;
    }
  }

  .no-transactions {
    w-empty-block,
    w-error-block {
      margin: 20px auto;
    }
  }
}

@media screen and (max-width: 768px) {

  html body md-dialog.asset-info-modal {
    .tab-container w-transaction-list {
      .w-visible {
        height: 91px;
      }
      ul {
        .transaction-item {
          .date {
            padding-left: 20px;
          }

          .row {
            padding-left: 0;

            .line:last-child {
              padding-right: 0;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 540px) {
  html body md-dialog.asset-info-modal {
    padding-bottom: 0;

    md-dialog-content {
      overflow-y: auto;
      height: auto;
      padding: 0 20px;
    }

    w-tabs.inner {
      .titles-wrap {
        padding: 0;
      }
      .tab-body-wrap {
        height: auto;
      }
    }

    w-tabs {
      margin: 0;
      width: 100%;
    }

    .padding-content .tab-tem {
      padding: 40px 20px;
    }

    .tab-tem {
      overflow-y: visible;
      max-height: 100%;
      padding: 0;

      .line {
        w-circle-chart {
          margin: 0 auto;
        }
      }

      .footnote-1.fs-mobile {
        font-size: @mobile-low-fsize;
      }
    }

    .tab-container {
      width: calc(100% ~'+ 40px');
      margin-left: -20px;

      w-transaction-list ul .transaction-item .date {
        padding-left: 23px;
      }
    }
  }
}

@media screen and (max-width: 420px) {
  html body md-dialog.asset-info-modal {
    .padding-content .tab-tem {
      .line.chart-container {
        flex-direction: column;

        & > div:first-child {
          width: 100%;
        }
        & > div:last-child {
          margin: 0;
          width: 100%;
        }
      }
    }
  }
}
